<template>
		<el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='550px' align='left'  :fullscreen = 'Global.currentDevice'>
      <el-upload
          ref='upload'
          :action="actionAddress"
          :headers='upload_header'
          multiple
          
          list-type="text"
          :show-file-list="true"
          :before-upload="beforeAvatarUpload"

          :on-change="uploadOnChange"
          :on-success="uploadOnSuccess"
          :on-remove='RemoveFile'
          :on-error="uploadOnError"
          :on-progress="uploadOnProgress"
          :file-list="fileList"
          >
          <el-button size="small" type="primary"  class='pb10'>点击上传</el-button>
      </el-upload>
        <!-- accept='.txt,.doc,.ppt,.xls,.docx,.xlsx,.pptx,.jpg,.jpeg,.png,.pdf,.tiff,.swf,.flv,.rmvb,.mp4,.mvb,.zip,.rar' 这一行加上 移动端就无法上传文件 -->
      <div slot="footer" class="dialog-footer">
              <el-button @click="dialogProps.visible = false">取 消</el-button>
              <el-button type="primary" @click="submit('form')"  :loading='displayLoading'>确 定</el-button>
        </div>
    </el-dialog>
</template>

<script >
//接口 
// import { listLabel ,getLabelById} from '@/api/settings/label'
export default {
  name: 'FileEdit',
  data () {
    return {
      /*按钮等待状态*/
      displayLoading: false,
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: '上传文件'
      },
     fileList:[],
      //请求标签列表 
      // search:{
      //   limit: 100,
      //   currentPage:1
      // },
      // options: [],//标签选择列表

      // fileList:[],//文件列表

      //文件上传请求地址
      actionAddress:process.env.BASE_API+'/op/fileupload/upload_file',
      /*上传请求头 加上token*/
      upload_header:{"X-Token":sessionStorage.getItem('token')},
      //提交表单信息
      form:[],//submit
    }
  },
  created(){
    
  },
  methods:{
    //初始化
    async pageinit(){
        let that =this

        this.$store.commit('showLoading')
        //请求标签列表
        await listLabel(this.search).then(res => {
            if(res.data.flag == true){
                this.options = res.data.dataList
            }
        })
        .catch(error => {
            // that.outputError(error)
        })

        this.$store.commit('hideLoading')
    },

    //提交表单
    submit(){
      let subform = [];
      this.form.forEach((item)=>{
        subform.push({code:item.code,name:item.file.name})
      })
      // console.log(subform)
      
      this.$emit('save',subform,this.options)
      this.dialogProps.visible=false
      this.fileList = []
    },

    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用;所以即使beforeupload return false 它也会执行
    uploadOnChange(file,fileList){

       // console.log("——————————change——————————")
    },

    //before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeAvatarUpload(file){
      const isLt2M = file.size / 1024 / 1024 < 310;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 310MB!');
      }
      return  Boolean(isLt2M);
    },

    //文件上传时的钩子 
    uploadOnProgress(e,file){
      this.displayLoading = true
    // console.log(Math.floor(e.percent),file)
    },
    
    //上传成功 res, file, fileList
    uploadOnSuccess(res,file,fileList){
    // console.log("——————————success——————————")
          file.labelname=[]
          this.$message.success("上传成功")
          this.form.push({
            code:res.data.code,
            file
          })
          this.displayLoading = false
         
    },
    //文件移除1
    RemoveFile(file, fileList){
        this.displayLoading = false
    },
    //上传失败回调
    uploadOnError(e,file){
        // console.log("——————————error——————————")
        this.$message.error("上传失败")
        this.displayLoading = false
    },
    
    //文件标签改变，值改变
    labelchange(val,row){
      // console.log(row.labelname)
      //注意val是 一个数组，需要深拷贝，否则会赋值不了！！！

      // if(val.length != 0){
      //     // row.file.labelname = []
      //     for( let item in val){

      //       row.file.labelname[item]=val[item]
      //     }  
         
      // }
      // else{
      //     row.file.labelname = []
      // }
      row.file.labelname=val.slice(0)
      // console.log(row.file.labelname)
      // console.log(this.form)
    }
  },
  mounted: function() {
    //打开dialog
    this.$nextTick(() => {
      this.$on('openDialog', function() {
        // this.fileList=[];
        this.form=[];
        
        this.dialogProps.visible = true
        // this.pageinit()
      })
      
    })
  },
  computed: {
   
  },
}
</script>

<style >
.el-upload-list{margin-bottom: 10px;}
.filetable .el-table--fit{max-height: 300px;overflow:auto;}
</style>